<template>
    <Layout class="layout-container">
        <Content>
            <Spin fix v-if="loading"></Spin>
            <Layout class="layout-container">
                <Content class="padding-all">
                    <CheckboxGroup v-model="value.roles">
                        <template v-for="(item, index) in roles">
                            <Checkbox :key="item.id" :label="item.id"><span>{{item.name}}</span></Checkbox>
                        </template>
                    </CheckboxGroup>
                </Content>
                <div class="padding-all">
                    <Button type="primary" class="pull-right" @click="submit">{{$t('info.submit')}}</Button>
                </div>
            </Layout>
        </Content>
    </Layout>
</template>
<script type="text/javascript">
import { Layout, Content, Alert, Form, Checkbox, CheckboxGroup, Button, Spin } from 'view-design';
import { msuccess, merror } from 'config/utils';
import { roles, setRoles } from './api';

export default {
    name: "SysAccountRole",
    props: {
        params: Object
    },
    data() {
        return {
            loading: true,
            value: {
                roles: []
            },
            roles: []
        };
    },
    methods: {
        loadRoles() {
            roles(this.params.id, (res) => {
                if (res.success) {
                    this.roles = res.data.roles;
                    this.value.roles = res.data.selectors;
                }
                this.loading = false;
            });
        },
        submit() {
            this.loading = true;
            setRoles(this.params.id, this.value.roles, (res) => {
                if (res.success) {
                    msuccess(this.$t("info.success"));
                    //关闭窗口
                    this.$emit("close");
                } else {
                    merror(this.$t("info.error"));
                }
                this.loading = false;
            });
        }
    },
    mounted() {
        this.loadRoles();
    },
    components: {
        Layout,
        Content,
        Alert,
        Form,
        Checkbox,
        CheckboxGroup,
        Button,
        Spin
    }
}
</script>